<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <link rel="stylesheet" href="./static/css/bilibili.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js">
    </script>
</head>

<body>

    <!-- 头部信息 -->
    <header id="internationalHeader" class="internationalHeader">

        <div class="mini-header">

            <!-- 搜索框 -->
            <div class="nav-search-box">
                <input type="search" name="" id="" class="nav-search-keyword">
                <button class="nav-search-button"><i class="fa fa-search"></i></button>
            </div>

            <!-- 用户中心 -->
            <div class="nav-user-center">

                <div class="user-avatar">
                    <img src="./static/images/avatar.jpg" class="avatar" />
                </div>

                <div class="user-info">
                    <ul>
                        <li>
                            <a href="#">消息</a>
                            <a href="#">动态</a>
                            <a href="#">收藏</a>
                            <a href="#">历史</a>
                            <a href="#">创作中心</a>
                        </li>
                    </ul>
                </div>

                <div class="upload">
                    <span><a href="#">投稿</a></span>
                </div>
            </div>

        </div>

        <!-- 分区导航 -->
        <div class="b-wrap">
            <div class="primary-menu-itnl">

                <!-- 分区左侧 -->
                <div class="primaryPageTab">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="round"></div>
                                <span>首页</span>
                            </a>
                            <a href="#">
                                <div class="round"></div>
                                <span>动态</span>
                            </a>
                            <a href="#">
                                <div class="round"></div>
                                <span>热门</span>
                            </a>
                            <a href="#">
                                <div class="round"></div>
                                <span>频道</span>
                            </a>
                        </li>
                    </ul>

                </div>
                <!-- 分割线 -->
                <span class="divide-line"></span>

                <!-- 分区中间 -->
                <div class="primaryChannelMenu">

                    <div class="item">
                        <a href="#" class="name">
                            <span>动画</span>
                            <em>296</em>
                        </a>
                    </div>

                    <div class="item">
                        <a href="#" class="name">
                            <span>番剧</span>
                            <em>9</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>音乐</span>
                            <em>608</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>国创</span>
                            <em>16</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>舞蹈</span>
                            <em>83</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>游戏</span>
                            <em>999+</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>知识</span>
                            <em>316</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>科技</span>
                            <em>78</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>生活</span>
                            <em>999+</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>鬼畜</span>
                            <em>9</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>时尚</span>
                            <em>114</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>资讯</span>
                            <em>2</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>娱乐</span>
                            <em>492</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>影视</span>
                            <em>512</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>放映厅</span>
                            <em>6</em>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="name">
                            <span>更多</span>
                            <em id="arrow"><i class="fa fa-chevron-down"></i></em>
                        </a>
                    </div>
                </div>
                <!-- 分割线 -->
                <span class="divide-line"></span>

                <!-- 分区右侧 -->
                <div class="primaryFriendshipLink">
                    <span>
                        <div class="item">
                            <a href="#" class="name">
                                <img src="" alt="">
                                <span>专栏</span>
                            </a>
                        </div>
                    </span>
                    <span>
                        <div class="item">
                            <a href="#" class="name">
                                <img src="" alt="">
                                <span>直播</span>
                            </a>
                        </div>
                    </span>
                    <span>
                        <div class="item">
                            <a href="#" class="name">
                                <img src="" alt="">
                                <span>活动</span>
                            </a>
                        </div>
                    </span>
                    <span>
                        <div class="item">
                            <a href="#" class="name">
                                <img src="" alt="">
                                <span>课堂</span>
                            </a>
                        </div>
                    </span>
                    <span>
                        <div class="item">
                            <a href="#" class="name">
                                <img src="" alt="">
                                <span>小黑屋</span>
                            </a>
                        </div>
                    </span>
                    <span>
                        <div class="item">
                            <a href="#" class="name">
                                <img src="" alt="">
                                <span>音乐PLUS</span>
                            </a>
                        </div>
                    </span>
                </div>

            </div>

        </div>

    </header>

    <!-- 主体信息 -->
    <main id="main">

        <!-- 推荐视频 -->
        <div class="first-screen">

            <!-- 推荐视频主体 -->
            <div class="space-between">
                <!-- 左侧轮播图 -->
                <div class="home-slide">
                    <a href="#"><img src="./static/images/yuanshen.png" alt="" width="100%" height="100%"></a>
                </div>

                <!-- 推荐视频右侧 -->
                <div class="rcmd-box-wrap">

                    <div class="rcmd-box">

                        <div class="video-card-reco"><a href="#"><img src="./static/images/amiya.jpg" alt=""
                                    width="100%" height="100%"></a></div>
                        <div class="video-card-reco"><a href="#"><img src="./static/images/anime-gilr.jpg" alt=""
                                    width="100%" height="100%"></a></div>
                        <div class="video-card-reco"><a href="#"><img src="./static/images/kuangsan.jpg" alt=""
                                    width="100%" height="100%"></a></div>
                        <div class="video-card-reco"><a href="#"><img src="./static/images/luoxiang.jpg" alt=""
                                    width="100%" height="100%"></a></div>
                        <div class="video-card-reco"><a href="#"><img src="./static/images/nekopara.jpg" alt=""
                                    width="100%" height="100%"></a></div>
                        <div class="video-card-reco"><a href="#"><img src="./static/images/saber.jpg" alt=""
                                    width="100%" height="100%"></a></div>

                    </div>

                    <div class="change-btn">
                        <i class="fa fa-refresh "></i>
                        <span>换一换</span>
                    </div>
                </div>
            </div>

            <!-- 观看列表 -->
            <div class="report-wrap-module">
                <div id="reportFirst">
                    <div class="online">
                        <a href="#">观看列表</a>
                    </div>
                </div>
            </div>

        </div>

    </main>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <script>
        $(".change-btn").hover(function () {
            $(".fa-refresh").addClass("fa-spin")R
        }, function () {
            $(".fa-refresh").removeClass("fa-spin");
        })
    </script>
</body>

</html>